<template>
    <div class="container">
        <div @click="back">&lt;返回地图</div>
        <div class="echarts" ref="main" id="main"></div>
    </div>
</template>
<script>
import getMapName from '../../../public/getMapName'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {}
    },
    methods: {
        //返回地图
        back() {
            this.option = {
                geo: {
                    map: 'china'
                }
            }
            this.myEschars.setOption(this.option)
        },
        //监听每一个省份的点击事件
        on() {
            /**
            * 监听每一个省份的点击事件
            * @params 监听的事件类型
            * @params callback
           */
            this.myEschars.on('click', async (provide) => {
                // console.log(provide);
                //获取省份对应的名称和路径
                const provideObj = getMapName(provide.name);
                if (!provideObj.name) {
                    return;
                }
                const providePath = 'http://localhost:8080' + provideObj.path;
                let provideData = await this.$axios(providePath);
                //注册各个省份地图
                this.$echarts.registerMap(provideObj.name, provideData.data)
                //将省份地图数据放在配置信息
                this.option = {
                    geo: {
                        map: provideObj.name
                    }
                }
                this.myEschars.setOption(this.option)
            })
        },
        //3获取地图相关数据
        async requestMap() {
            //1.获取地图数据
            var mapData = await this.$axios('http://localhost:8080/map/china.json');
            // console.log(mapData);
            if (mapData.status === 200) {
                //2.注册地图
                this.$echarts.registerMap('china', mapData.data)
            }

            //发起各地区农作物覆盖面积 请求
            var res = await this.$axios('/api/CropCoverage');
            if (res.status === 200) {
                // console.log(res);
                this.option = {
                    title: {
                        text: '各地区农作物覆盖面积',
                        left: 10,
                        top: 20,
                        subtext: res.data.MainPlants + '万亩',
                        subtextStyle: { color: 'orange', fontSize: 15 }
                    },
                    tooltip: { show: true },  //提示组件
                    visualMap: {   //是视觉映射组件，用于进行『视觉编码』
                        show: true,
                        calculable: true,  //是否显示拖拽用的手柄
                        max: 400,
                        min: 0,
                        inRange: {  //在选中范围中 的视觉元素
                            color: ['#5fa4d9', '#0f436b']
                        }
                    },
                    geo: { //注册地图  地理坐标系组件。
                        map: 'china',   //注册的地图名称。
                        zoom: 1.2,   //视角的缩放比例大小
                        label: {
                            show: true,
                            fontSize: 9
                        },
                        //调屏幕的大小
                        left: '20%',
                        top: '10%',
                        right: '20%',
                        bottom: '5%'
                    },
                    series: [
                        {
                            type: 'map',  //地图
                            geoIndex: 0,  //map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。
                            data: res.data.content
                        }
                    ]
                }

                //使用echarts实列设置配置项
                this.myEschars.setOption(this.option)
            }
        },

        screen() {
            // console.log(111);
            this.myEschars.resize();
            //获取屏幕的宽度
            const width = document.getElementById('main').offsetWidth;
            var num = width / 100 * 3.5;
            this.option = {
                title: {
                    textStyle: { fontSize: num },
                    subtextStyle: { fontSize: num * 0.7 }
                }
            }
            this.myEschars.setOption(this.option)
        },
        init() {
            const oDiv = this.$refs.main;

            this.myEschars = this.$echarts.init(oDiv, this.theme);
        }
    },
    mounted() {
        this.init()
        //3获取地图相关数据
        this.requestMap()
        //点击事件
        this.on()
        // this.screen()
        //
        window.addEventListener('resize', this.screen);

    },
    destroyed() {
        window.removeEventListener('resize', this.screen)
    },
    watch: {
        theme() {
            this.myEschars.dispose()
            this.init()
            this.requestMap()
            //点击事件
            this.on()
        }
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>